{% extends 'index.html' %}
{% load static %}
{% block mycss %}
    <script type="text/javascript" src="{% static 'js/echarts/jquery-3.2.1.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/echarts/echarts.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/echarts/china.js' %}"></script>
{% endblock %}

{% block title %}
    <span class="navbar-page-title">军事需求图谱分析 - 地图分析</span>
{% endblock %}

{% block content %}
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-xs-3">
                                <input type="text" id="entity" class="form-control" placeholder="请输入事件名称" value="">
                            </div>
                            <div class="col-xs-2">
                                <button class='btn btn-primary my-btn' type="submit" id="noumenon_serach">查询
                                </button>
                            </div>
                        </div>


                    </div>
                </div>
            </div>
        </div>
        <div id="map_pic" style="width: 100%;height: calc(100vh - 215px)"></div>
    </div>
{% endblock %}

{% block myjs %}
    <script type="text/javascript">
        document.getElementById("jsxqtpfx").style.display = 'block';
        document.getElementById("dtfx").style.backgroundColor = 'rgba(30,21,21,0.44)';

        $('#noumenon_serach').click(function () {

            var entity = $('#entity').val();
            var formdata = new FormData();

            formdata.append("entity", entity);

            $.ajax({
                url: '{% url 'map_analysis' %}',
                type: 'POST',
                async: false,
                data: formdata,
                processData: false, // 使数据不做处理
                contentType: false, // 不要设置Content-Type请求头
                success: function (data) {
                    {#todo 执行函数#}
                    map_ass(data.data.geoCoordMap, data.data.data)
                },
                error: function (response) {
                    console.log(response);
                }
            });
        })
    </script>

    <script type="text/javascript">
        let jsonMap = {
            area: '地理坐标',
            content: '内容',
            created_time: '创建时间',
            label: '类型',
            name: '地点',
            time: '发生时间'
        }

        function map_ass(geoCoordMap, data) {


            var myChart = echarts.init(document.getElementById('map_pic'));

            // 处理数据 value为坐标，properties为详细数据
            var convertData = function (data) {
                var res = [];
                for (var i = 0; i < data.length; i++) {
                    var geoCoord = geoCoordMap[data[i].name]; //记录坐标
                    if (geoCoord) {
                        res.push({
                            value: geoCoord,
                            properties: data[i]
                        });
                    }
                }
                return res;
            };


            option = {
                backgroundColor: '#fff',  //背景颜色
                title: {
                    text: '地图展示',
                    left: 'center',
                    textStyle: {
                        color: 'rgb(100,187,241)'
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: function (x) {
                        var htmlStr = '';
                        var k = '';
                        let chooseShow = ['name', 'time', 'label', 'area'] //选择悬浮框展示的内容以及顺序
                        for (k in chooseShow) {
                            htmlStr += jsonMap[chooseShow[k]] + ' : ' + x.data.properties[chooseShow[k]] + '<br/>';
                        }
                        return htmlStr;
                    },
                    extraCssText: 'background:rgba(4,44,112,0.8)'
                },
                legend: {
                    orient: 'vertical',
                    top: 'bottom',
                    left: 'right',
                    data: ['mapshow'],
                    textStyle: {
                        color: '#fff'
                    }
                },
                geo: {
                    map: "china",
                    show: true,
                    roam: false,
                    zoom: 1.2,
                    itemStyle: {
                        normal: {
                            borderWidth: 3,
                            borderColor: "rgb(100,187,241)",
                            shadowColor: "rgb(100,187,241)",
                            shadowBlur: 10
                        }
                    },
                    textStyle: {
                        color: "#fff"
                    }
                },
                series: [
                    {
                        type: "map",
                        map: "china",
                        // name: "地图",
                        roam: false,
                        zoom: 1.2,
                        aspectScale: 0.75, //长宽比
                        label: {
                            normal: {
                                show: true,
                                fontSize: this.mapFontSize,
                                color: "rgba(74,178,254,0.8)"
                            },
                            emphasis: {
                                show: false,
                                textStyle: {
                                    color: "rgba(74,178,254,0.8)"
                                }
                            }
                        },
                        itemStyle: {
                            normal: {
                                areaColor: "#002292",
                                borderColor: "#0036ba",
                                borderWidth: 1
                            },
                            emphasis: {
                                show: false,
                                areaColor: "#002292"
                            }
                        }
                    },
                    {
                        name: 'Top 5',
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        data: convertData(data),
                        {#encode: {value: 2},#}
                        symbolSize: 10,
                        {#function (val) {#}
                        {#return val[2] / 10;},#}
                        showEffectOn: 'render',
                        rippleEffect: {
                            brushType: 'stroke'
                        },
                        hoverAnimation: true,
                        label: {
                            show: false
                        },
                        itemStyle: {
                            color: '#f4e925',
                            shadowBlur: 0,
                            shadowColor: '#333'
                        }
                    },
                    {
                        name: 'ampshow',
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        data: [],
                        symbolSize: 12,
                        label: {
                            normal: {
                                //show: true,
                                position: 'right',
                                color: '#ffffff',
                                formatter: function (x) {
                                    //return  x.data.properties.name;
                                },
                                textStyle: {
                                    fontSize: 12
                                }
                            },
                            emphasis: {
                                show: false
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: 'red',
                            }
                        }
                    }
                ]
            }
            ;
            //console.log("dasd",option.series[1].data);
            myChart.setOption(option);
            myChart.on('click', function (params) {
                // 控制台打印数据的名称 properties
                console.log(params.data.properties);
                {#let jsonMap = {#}
                {#    area: '地理坐标',#}
                {#    content: '内容',#}
                {#    created_time: '创建时间',#}
                let chooseShow = ['name', 'time', 'created_time', 'area', 'content'];
                let temArr = []
                chooseShow.forEach(e => {
                    temArr.push(`${jsonMap[e]}:${params.data.properties[e]}`)
                })
                zdalert(params.data.properties.label, temArr, function () {
                });
            });
        }

    </script>
{% endblock %}



